<template>
  <div class="allbox" ref="all" @scroll="scrollTop">
    <div class="header" >
      <van-nav-bar @click-left="$router.back()">
        <template #left>
          <van-icon name="arrow-left" size="20" color="black" />
          返回
        </template>
        <template #title>
          <van-search
            class="search"
            v-model="value"
            placeholder="请输入搜索关键词"
            shape="round"
            autofocus
          />
        </template>
      </van-nav-bar>
    </div>
    <div class="main">
      <ul :class="isShow ? 'goods1' : 'goods2'">
        <li
          class="van-hairline--surround"
          v-for="(item, index) in CateoryBrandProList"
          :key="index"
          @click="jumpTo(item.proid)"
        >
          <img :src="item.img1" alt="" />
          <div>
            <h4 class="van-multi-ellipsis--l2">{{ item.proname }}</h4>
            <p class="money">￥{{ item.originprice }}</p>
            <!-- {{list}} -->
          </div>
        </li>
        <div class="toggle" @click="isShow = !isShow">
          <van-icon name="apps-o" v-if="isShow" />
          <van-icon name="bars" v-if="!isShow" />
        </div>
      </ul>
      <div class="top" v-if="scrollTopData > 100" @click="backTop">
        <van-icon name="back-top" />
      </div>
    </div>
  </div>
</template>

<script>
import { categoryBrandProList } from "../api/kinds";
export default {
  data() {
    return {
      value: "",
      CateoryBrandProList: null,
      isShow: true,
      scrollTopData: null,
    };
  },
  created() {
    // console.log(this.$route.params.category);
    // console.log(this.$route.params.brand);
    categoryBrandProList({
      count: 1,
      limitNum: 10,
      category: this.$route.params.category,
      brand: this.$route.params.brand,
    }).then((data) => {
      console.log(data);
      this.CateoryBrandProList = data.data.data;
    });
  },
  methods: {
    scrollTop() {
      this.scrollTopData = this.$refs.main.scrollTop;
      console.log(this.scrollTopData);
    },
    backTop() {
      // this.$refs.main.scrollTop = 0;
      this.timer = setInterval(() => {
        if (this.$refs.main.scrollTop <= 0) {
          clearInterval(this.timer);
        }
        this.$refs.main.scrollTop -= 100;
      }, 10);
    },
    jumpTo(proid) {
      this.$router.push("/detail/" + proid);
    },
  },
};
</script>

<style scoped>
.search {
  padding: 0;
}
.goods1 {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  /* position: relative; */
}
.goods1 li {
  width: 48%;
}
.goods1 li img {
  width: 100%;
}
/* .goods2{
  position: relative;
} */
.goods2 li {
  display: flex;
}
.goods2 li img {
  width: 30%;
}
.goods2 li div {
  flex: 1;
}
.toggle {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 0.5rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
}
.money {
  color: red;
}
.top {
  width: 0.3rem;
  height: 0.3rem;
  border: 1px solid black;
  border-radius: 50%;
  position: fixed;
  bottom: 1rem;
  right: 0.2rem;
  text-align: center;
  line-height: 0.3rem;
}
.allbox{
  overflow: auto;
}
</style>